<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">
		<title>小米轮播图制作</title>
		<!--轮播图：JavaScript技术完成
		前端框架：简化开发模式，功能一致
		tenseBannerJS  专门针对轮播  使用方便
		-->
		<!--1.轮播图样式 -->
		<link rel="stylesheet" href="css/style.css" />
		</head>
		<body>
		<!-- 3.类似于html固定写法【小心起名与轮播图框架冲突】-->
	    <!-- 3.1 main  样式为主：引入轮播 -->
		<div class="main">
			<!--3.2   id="animation"   js行为为主：轮播行为
			<div id="animation"></div>
			<!--3.3  class="container"样式为主：开辟轮播空间-->
			<div class="container">
				<!-- 选择轮播效果：延迟加载 -->
				<div class="banner" id="lazyload">
					<ul>
						<li><img src="img/banner01.jpg" alt="1"/></li>
						<li><img src="img/banner02.jpg" alt="2"/></li>
						<li><img src="img/banner03.jpg" alt="3"/></li>
						<li><img src="img/banner04.jpg" alt="4"/></li>
						<li><img src="img/banner05.jpg" alt="5"/></li>
					</ul>
				</div>
			</div>
		</div>
	
		<!--2.引入jquery封装轮播框架 .js文件 -->
		<script src="highlight.pack.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.terseBanner.min.js"></script>
		<script src="script.js"></script>
	</body>
</html>